<template>
    <div class="stationLeftContentOne">
        <div class="hangzhou">
            <div class="hangzhouImg lf">
            </div>
            <ul class="hangzhouD lf">
                <li  class="hangzhouName">{{this.$store.state.headerStation}}</li>
                <!-- <li class="hangzhouAssess" :style="{background:color[StationEPAdata.Level-1]}">{{StationEPAdata.levelName+" "+StationEPAdata.QXDJ}}</li> -->
                <!-- <li class="hangzhouNum">
                    <div class="bigNum">
                        {{parseInt(this.StationEPAdata.negative_K04)}}</div>
                    <div class="smallNum">/{{parseInt(this.StationEPAdata.MaxNegative_K04)}}</div>
                    <div class="darkNum">
                        负氧离子(个/cm3)
                    </div>
                </li> -->
            </ul>
        </div>
        <div class="weatherData">
            <div class="onDayWeather"  v-for="(item, index) of weatherList.data.forecast" v-if="index < 5" :key="index" :class="{active: isIndex==index}">
                <div class="onDayWeatherDate">
                    {{item.date}}
                </div>
                <div class="onDayWeatherImg">
                    <!-- <img src="/tianqi.png" alt="" style="height:3.4vh"> -->
                    <svg class="icon" aria-hidden="true" style="font-size:45px">
                        <use :xlink:href="'#'+getWeatherPic(item.type)"></use>
                    </svg>
                    <!-- <span class="iconfont" v-html="getWeatherPic(item.type)" style="height:3.4vh;color:yellow;font-size:.50rem"></span> -->
                </div>
                <div class="onDayWeatherDu">
                    {{parseInt(item.low.substring(2))}} ~ {{parseInt(item.high.substring(2))}} ℃
                </div>
                <div class="onDayWeatherRain">
                    {{item.type}}
                </div>
                <div class="onDayWeatherWind">
                    {{item.fx}}
                </div>
                <!-- <div class="onDayWeatherLevel">
                    <div class="haveBG">
                        优
                    </div>
                </div> -->
            </div>
        </div>
        <!-- <div id="littleCharts"></div> -->
        <div class="cityImg">
            <div class="firstImg lf" >
                <!-- <div class="zhezhao">图册</div> -->
            </div>
            <div class="secondImg lf" >
                <!-- <div class="zhezhao">图册</div> -->
            </div>
        </div>
        <common-swiper @swiper="handleSwiperClick" v-if="isSwiper"></common-swiper>

    </div>
</template>
<script>
//let echarts = require('echarts');
import CommonSwiper from '../../commons/CommonSwiper'
export default {
    name: 'StationLeftContentOne',
    components: {
        CommonSwiper
    },
    props:{
        StationEPAdata:Object,
        weatherList: Object,
    },
    watch:{
        StationEPAdata: function(val){
            switch(val.Level){
                case 1:{
                    val.levelName="I";
                    break;
                }
                case 2:{
                    val.levelName="II";
                    break;
                }
                case 3:{
                    val.levelName="III";
                    break;
                }
                case 4:{
                    val.levelName="IV";
                    break;
                }
                case 5:{
                    val.levelName="VI";
                    break;
                }
            };         
        }      
    },
    methods: {
        weatherMouseOver: function(index){
            this.isIndex = index
        },
        handleBannerClick(){
            this.isSwiper = true
        },
        handleSwiperClick(){
            this.isSwiper = false
            
        },
        getWeatherPic(type){
            for(let i=0;i<this.weatherPicData.length;i++){
                if(this.weatherPicData[i][0] == type){
                    return this.weatherPicData[i][1];             
                    break;
                }
            }         
        }, 
    },
    mounted(){
        //this.drawcharts()
        //this.getCityCode();
    },
     computed:{
        weatherPicData(){
            return this.$store.state.weatherPicData
        }
    },
    data(){
        return {
            color:["#0CDE4E","#32F3A9","#63B5E6","#6AA6C9","#737373","#737373"],
            city_code:null,
            isIndex: 0,
            
            isSwiper: false
            
      }
    }
}
</script>
<style lang="stylus" scoped>
    .stationLeftContentOne
        height:41.7vh
        display: inline-block
        .hangzhou
            width: 3.86rem 
            height: 8.24vh
            margin-left: .18rem
            margin-top: 2.59vh
            margin-bottom : 3.05vh
            .hangzhouImg
                width: 1.57rem
                height: 8.24vh
                border: 1px solid #FFF
                background : url('/jiang.jpg') no-repeat 
                background-size:cover
                
            .hangzhouD
                width: 2.19rem
                height: 8.24vh
                overflow: hidden
                margin-left: .1rem
                .hangzhouName
                    height: 2.13vh
                    margin-top:5.11vh
                    font-size: .24rem
                    vertical-align:bottom
                .hangzhouAssess
                    margin-top: .83vh
                    margin-bottom: 1.1vh
                    width:.98rem
                    height: 2.22vh
                    line-height :2.22vh
                    font-size: 0.16rem
                    text-align :center
                    background :#32F3A9
                .hangzhouNum
                    width: 100%
                    font-size: .15rem
                    display:flex
                    align-items: flex-start
                    align-content: flex-start
                    .bigNum
                        font-size: .24rem
                    .smallNum
                        margin-top:.10rem
                    .darkNum
                        font-size:12px
                        transform : scale(.8)
                        margin-left:-5px
                        margin-top:.12rem
                        color: #ADADAD

        .weatherData
            height:17.92vh
            margin-top: 3.9vh
            // margin-left: .38rem
            display: flex
            justify-content : space-around
            .onDayWeather
                width: .54rem
                height: 16.4vh
                border-left: 1px solid #7D7D7D
                text-align :center
                flex:1
                .onDayWeatherDate
                    line-height: 2.4vh
                    font-size: .16rem 
                .onDayWeatherImg
                    height: 4.4vh
                    line-height: .4vh
                .onDayWeatherDu
                    line-height : 2.4vh
                    font-size: .1rem
                .onDayWeatherRain
                    font-size: .1rem
                    line-height : 2.4vh
                .onDayWeatherWind
                    line-height : 2.4vh
                    font-size: .1rem
                .onDayWeatherLevel
                    height:2.4vh
                    font-size: .12rem
                    overflow: hidden
                    .haveBG
                        width:.35rem
                        line-height: 1.7vh
                        margin: 0 auto
                        margin-top: 0.4vh
                        background : #22AC38
            .onDayWeather:first-child
                border:none       
            .onDayWeather.active
                text-align :center
                background:rgba(13,131,214,0.52)
                width:1.06rem
                flex:1.5
            .onDayWeather.active .onDayWeatherRain
                background : rgba(13,131,214,0.52)
            .onDayWeather.active .onDayWeatherLevel
                background : rgba(13,131,214,0.52)
        .cityImg
                width: 100%
                height: 10vh
                .firstImg
                    width: 1.96rem
                    height: 10vh
                    border: 2px solid #fff
                    margin-left: .06rem
                    margin-right: .09rem
                    background: url('/zhe.jpg') no-repeat 
                    background-size:cover
                    position: relative
                    cursor:pointer 
                    .zhezhao
                        width:100%
                        line-height:27px
                        text-align : center
                        position : absolute
                        left: 0
                        bottom: 0
                        font-size: 12px
                        background:rgba(28,28,28,.6)
                .secondImg
                    width: 1.78rem
                    height: 10vh
                    border: 2px solid #fff
                    background: url('/jiang.jpg') no-repeat 
                    background-size:cover  
                    position: relative   
                    cursor:pointer 
                    .zhezhao
                        width:100%
                        line-height: 27px
                        text-align : center
                        position: absolute   
                        left: 0
                        bottom: 0    
                        font-size: 12px 
                        background:rgba(28,28,28,.6)  
</style>


